استعلامات نمط حاويات CSS: إحداث ثورة في التصميم المتجاوب المستند إلى العناصر

لطالما تم تشكيل مشهد تصميم الويب من خلال مفهوم تصميم الويب المتجاوب، وهو نموذج يسمح لمواقع الويب بتكييف تخطيطها ومظهرها عبر مجموعة كبيرة من الأجهزة وأحجام الشاشات. لسنوات، كان هذا التكيف مدفوعًا في المقام الأول باستعلامات الوسائط القائمة على منفذ العرض، والتي تستهدف خصائص نافذة المتصفح نفسها. على الرغم من قوتها وأساسها بشكل لا يصدق، إلا أن هذا النهج له قيود متأصلة عندما يتعلق الأمر بتحقيق تحكم دقيق في المكونات الفردية داخل الصفحة.

أدخل استعلامات نمط حاويات CSS. تمثل هذه الميزة الرائدة تطورًا كبيرًا في CSS، حيث تحول التركيز من منفذ العرض إلى الحاوية - العنصر الأصل الذي يلتف حول مكون معين. يمكّن هذا التغيير الجوهري المطورين من إنشاء تصميمات متجاوبة تتمحور حول العناصر حقًا، مما يتيح للمكونات تكييف أنماطها وتخطيطاتها بناءً على أبعادها الخاصة، بدلاً من نافذة المتصفح الأوسع. هذا تحول نموذجي يعد بتبسيط أنماط الاستجابة المعقدة وتعزيز واجهات مستخدم أكثر قوة وقابلة للصيانة وواعية بالسياق لجمهور عالمي.

قيود الاستجابة القائمة على منفذ العرض

قبل الخوض في تفاصيل استعلامات الحاويات، من الضروري فهم سبب كونها تغير قواعد اللعبة. يعتمد التصميم المتجاوب التقليدي بشكل كبير على @media (min-width: 768px) أو قواعد مماثلة تستهدف منفذ العرض. على الرغم من فعاليته في تعديلات تخطيط الصفحة بشكل عام، إلا أن هذا النهج يمثل تحديات عند التعامل مع المكونات التي قد تكون متداخلة داخل أجزاء مختلفة من الصفحة، ولكل منها مساحة متاحة متفاوتة.

سيناريو: مكون مشترك في سياقات متعددة

تخيل مكون واجهة مستخدم شائع، مثل بطاقة منتج أو مقتطف ملف تعريف مستخدم. في موقع نموذجي للتجارة الإلكترونية أو منصة وسائط اجتماعية، قد يظهر هذا المكون في عدة سياقات متميزة:

• داخل صفحة قائمة منتجات واسعة ومتعددة الأعمدة.
• داخل عنصر واجهة مستخدم الشريط الجانبي الضيق.
• كعنصر مميز في بانر بطل كبير.
• في نافذة مشروطة مدمجة.

باستخدام استعلامات الوسائط المستندة إلى منفذ العرض، يصبح تحقيق تصميم متميز ومناسب للسياق لهذا المكون الواحد مهمة معقدة. قد ينتهي بك الأمر بما يلي:

• سلاسل محددات محددة بشكل مفرط تكون هشة ويصعب صيانتها.
• قواعد CSS مكررة لنفس المكون في ظل ظروف منفذ عرض مختلفة.
• الحاجة إلى JavaScript لاكتشاف الحجم المعروض الفعلي للمكون وتطبيق الفئات وفقًا لذلك، مما يضيف تعقيدًا غير ضروري وتكاليف أداء محتملة.

غالبًا ما يؤدي هذا إلى سيناريو حيث يتم إملاء سلوك المكون من خلال تخطيط الصفحة العام بدلاً من احتياجاته الجوهرية والمساحة المتاحة. يمكن أن يؤدي ذلك إلى تجاوزات محرجة أو نص ضيق أو استخدام غير فعال للمساحة، خاصةً عندما يصل المستخدمون إلى المحتوى عبر مجموعة واسعة من الأجهزة وتكوينات المتصفح في جميع أنحاء العالم.

مقدمة إلى استعلامات حاويات CSS

تغير استعلامات الحاويات هذا بشكل أساسي من خلال السماح لك بتحديد نطاقات استجابة بناءً على أبعاد حاوية أصلية، بدلاً من منفذ عرض المتصفح. هذا يعني أنه يمكنك تطبيق أنماط على عنصر بناءً على مدى عرض أو ارتفاع العنصر الذي يحتويه.

المفاهيم الأساسية: الحاوية والاحتواء

لاستخدام استعلامات الحاويات، تحتاج أولاً إلى إنشاء حاوية. يتم ذلك باستخدام الخاصية container-type. ثم تحدد اسم الحاوية (اختياري، ولكنه جيد للوضوح) و ميزة استعلام الحاوية (على سبيل المثال، العرض، الارتفاع).

الخصائص الرئيسية لاستعلامات الحاويات

• container-type: تحدد هذه الخاصية نوع الاحتواء. القيم الأكثر شيوعًا هي:
• normal: القيمة الافتراضية. لا ينشئ العنصر حاوية استعلام جديدة.
• inline-size: ينشئ حاوية تستعلم بناءً على حجم العنصر المضمن (أفقي للغات LTR). هذا هو الأكثر استخدامًا للتصميم المتجاوب.
• block-size: ينشئ حاوية تستعلم بناءً على حجم كتلة العنصر (عمودي للغات من أعلى إلى أسفل).
• size: ينشئ حاوية تستعلم بناءً على كل من الأبعاد المضمنة والكتلة.
• container-name: يعين اسمًا مخصصًا للحاوية. يكون هذا مفيدًا عندما يكون لديك حاويات متعددة في صفحة وتريد استهداف الأنماط بواحدة معينة.

قاعدة @container

على غرار استعلامات @media، يتم تعريف استعلامات الحاويات باستخدام قاعدة @container. تتيح لك هذه القاعدة تحديد الشروط بناءً على خصائص الحاوية.

يبدو بناء الجملة كما يلي:

            
.my-component {
  container-type: inline-size;
  container-name: card-container;
}

@container card-container (min-width: 300px) {
  .my-component {
    /* Styles applied when the container named 'card-container' is at least 300px wide */
    background-color: lightblue;
  }
}

@container (max-width: 250px) {
  .my-component {
    /* Styles applied when the container is at most 250px wide (no name needed if only one container) */
    font-size: 0.8em;
  }
}

            

              
                Copy
              
            
          

لاحظ استخدام container-name في المثال الأول. إذا كانت هناك حاوية واحدة فقط في نطاق الاستعلام، فيمكن حذف الاسم. ومع ذلك، فإن استخدام الأسماء يجعل CSS الخاص بك أكثر قابلية للقراءة والصيانة، خاصة في مكتبات المكونات المعقدة المستخدمة عبر فرق ومشاريع عالمية مختلفة.

التطبيقات العملية وحالات الاستخدام

تفتح استعلامات الحاويات مستوى جديدًا من التحكم في الاستجابة على مستوى المكون. دعنا نستكشف بعض السيناريوهات العملية:

1. تكييف تخطيطات البطاقات

ضع في اعتبارك بطاقة منتج تحتاج إلى عرضها بشكل مختلف بناءً على عرض الشبكة الأصل أو حاوية المرونة.

            
.product-card {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* Small container: stacked layout */
@container (max-width: 200px) {
  .product-card {
    flex-direction: column;
    text-align: center;
  }
  .product-card img {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* Medium container: side-by-side with text */
@container (min-width: 201px) and (max-width: 400px) {
  .product-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  .product-card img {
    margin-right: 15px;
    margin-bottom: 0;
    max-width: 120px; /* Example: Image takes less horizontal space */
  }
}

/* Large container: more prominent image and details */
@container (min-width: 401px) {
  .product-card {
    flex-direction: row;
    align-items: center;
    text-align: center;
  }
  .product-card img {
    margin-right: 20px;
    margin-bottom: 0;
    max-width: 150px;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، .product-card نفسه عبارة عن حاوية. عندما يتغير عرضه، يتكيف تخطيطه الداخلي (التراص مقابل جنبًا إلى جنب) ونمط صورته ونصيته وفقًا لذلك، بغض النظر عن حجم منفذ العرض العام. هذا قوي بشكل لا يصدق لإنشاء مكونات قابلة لإعادة الاستخدام ومستقلة بذاتها تعمل باستمرار أينما تم وضعها على موقع ويب عالمي.

2. مكونات التنقل

غالبًا ما تحتاج أشرطة التنقل أو القوائم إلى التحول من تخطيط أفقي على الشاشات الكبيرة إلى قائمة عمودية أو قائمة هامبرغر على الشاشات الصغيرة. تسمح استعلامات الحاويات لمكون التنقل نفسه بإملاء هذا التغيير بناءً على العرض المتاح داخل الأصل الخاص به، والذي قد يكون رأسًا أو شريطًا جانبيًا.

            
.main-nav {
  container-type: inline-size;
  display: flex;
  justify-content: flex-end;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.main-nav li {
  margin-left: 20px;
}

/* When the nav container is narrow, stack the menu vertically */
@container (max-width: 400px) {
  .main-nav {
    justify-content: center;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: center;
  }
  .main-nav li {
    margin-left: 0;
    margin-bottom: 10px;
  }
}

            

              
                Copy
              
            
          

3. عناصر النموذج وحقول الإدخال

يمكن أن تستفيد تخطيطات النماذج المعقدة، وخاصة تلك التي تحتوي على أعمدة متعددة أو تسميات ومدخلات محاذاة، بشكل كبير. يمكن أن تصبح مجموعة النماذج حاوية، ويمكن لحقول الإدخال أو التسميات التابعة لها ضبط عرضها أو هوامشها أو خصائص العرض الخاصة بها بناءً على حجم مجموعة النماذج.

4. أدوات وبطاقات لوحة المعلومات

في واجهات لوحة المعلومات، غالبًا ما يتم وضع أدوات مختلفة (على سبيل المثال، الرسوم البيانية وجداول البيانات وبطاقات الإحصائيات) داخل نظام شبكة. يمكن أن تكون كل أداة حاوية، مما يسمح لعناصرها الداخلية بالتكيف برشاقة. قد يعرض الرسم البياني عددًا أقل من نقاط البيانات أو تصورًا مختلفًا على مثيلات الأدوات الأصغر، بينما قد يخفي جدول البيانات أعمدة أقل أهمية.

5. اعتبارات التدويل

أحد الجوانب الأكثر إقناعًا للجمهور العالمي هو كيف يمكن لاستعلامات الحاويات تحسين جهود التدويل (i18n). اللغات المختلفة لها أطوال نصية متفاوتة. على سبيل المثال، يمكن أن تكون الألمانية أو الإسبانية أطول في الغالب من الإنجليزية. قد ينكسر المكون الذي يبدو مثاليًا باللغة الإنجليزية أو يصبح ضيقًا جدًا عند ترجمته إلى لغة بها كلمات أو هياكل جمل أطول.

باستخدام استعلامات الحاويات، يمكنك تعيين نقاط توقف بناءً على العرض المعروض الفعلي للمكون. هذا يعني أنه يمكن للمكون تكييف تخطيطه وطباعته بناءً على المساحة المتاحة له، واستيعاب النصوص الأطول من الترجمات بشكل أكثر رشاقة من استعلامات منفذ العرض وحده. يؤدي هذا إلى تجربة مستخدم أكثر اتساقًا وصقلًا عبر جميع اللغات واللغات المدعومة.

دعم ميزات استعلام الحاويات

اعتبارًا من أواخر عام 2023 وأوائل عام 2024، يتحسن دعم المتصفح لاستعلامات الحاويات بشكل مطرد. توفر المتصفحات الحديثة مثل Chrome و Firefox و Safari و Edge دعمًا جيدًا، إما أصليًا أو خلف علامات الميزات التي يتم تمكينها تدريجيًا. ومع ذلك، بالنسبة للتطوير العالمي، من الحكمة دائمًا:

• تحقق من caniuse.com للحصول على أحدث بيانات دعم المتصفح.
• توفير بدائل احتياطية للمتصفحات القديمة التي لا تدعم استعلامات الحاويات. قد يتضمن ذلك الالتزام بأنماط استجابة أبسط أو استخدام حلول قائمة على JavaScript عند الضرورة القصوى للدعم القديم.

الاتجاه واضح: أصبحت استعلامات الحاويات ميزة CSS قياسية، والاعتماد عليها للاستجابة على مستوى المكون هو المستقبل.

التقنيات والاعتبارات المتقدمة

بالإضافة إلى استعلامات العرض والارتفاع الأساسية، تقدم CSS إمكانات أكثر تقدمًا لتصميم الحاويات:

استعلامات @container style()

هنا تتألق استعلامات نمط الحاوية حقًا. في حين أن استعلامات @container (min-width: ...)` حول الحجم، تسمح لك استعلامات @container style()` بالاستجابة لـ قيم النمط المحسوبة لعنصر. يفتح هذا عالمًا جديدًا تمامًا من الاحتمالات، مما يمكّن المكونات من التكيف بناءً على أنماطها المحسوبة الخاصة، مثل:

            
.dashboard-widget {
  container-type: inline-size;
  --widget-density: 1; /* Default density */
}

/* When the container is wide, we might want a more spaced-out look */
@container (min-width: 600px) {
  .dashboard-widget {
    --widget-density: 2; /* Increase spacing */
  }
}

.widget-title {
  font-size: calc(1rem + (var(--widget-density) - 1) * 0.2rem); /* Adjust font size based on density */
  margin-bottom: calc(10px * var(--widget-density)); /* Adjust margin */
}

            

              
                Copy
              
            
          

            
.image-gallery {
  container-type: inline-size;
  aspect-ratio: 16 / 9; /* Define aspect ratio */
}

@container style(aspect-ratio >= 2) {
  /* Styles for when the container is wider than it is tall (e.g., landscape) */
  .image-gallery img {
    object-fit: cover;
  }
}

@container style(aspect-ratio < 1) {
  /* Styles for when the container is taller than it is wide (e.g., portrait) */
  .image-gallery img {
    object-fit: contain;
  }
}

            

              
                Copy
              
            
          

            
.parent-container {
  container-type: inline-size;
  container-name: parent;
  width: 100%;
  display: flex;
}

.child-component {
  flex: 1;
  margin: 10px;
  container-type: inline-size;
  container-name: child;
  background-color: lightcoral;
  padding: 10px;
}

/* This query applies to the .child-component based on ITS width */
@container child (min-width: 250px) {
  .child-component {
    background-color: lightgreen;
  }
}

/* This query applies to the .parent-container based on ITS width */
@container parent (min-width: 600px) {
  .parent-container {
    flex-direction: column;
  }
}

            

              
                Copy